<script setup>
import { ref, onMounted, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const token = localStorage.getItem('token')
const topstorylist = ref([])
const carlist = ref([])
const aboutuser = ref([])
const currentPage = ref(1);  // 当前页码
const pageSize = ref(10);    // 每页条数
const total = ref(0);        // 数据总数
const count = ref(0)

// 获取数据
const fetchData = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/api/search/', {
      searchKeyword: route.query.searchKeyword,
      page: currentPage.value,
      page_size: pageSize.value
    }, {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      }
    });

    topstorylist.value = response.data.topicmsg;
    carlist.value = response.data.carmsg;
    total.value = response.data.total;
    aboutuser.value = response.data.aboutuser;
  } catch (error) {
    console.error('Error fetching data', error);
  }
};

// 处理分页变化的函数
const handleCurrentChange = async (page) => {
  currentPage.value = page;
  await fetchData();
};

// 页面加载时获取数据
onMounted(async () => {
  await fetchData();
});

// 监听路由参数的变化
watchEffect(() => {
  const isFlushed = route.query.isFlushed;
  if (isFlushed) {
    // 如果 isFlushed 为 true，则清除以前的数据并添加新的数据
    topstorylist.value = [];
    carlist.value = [];
    handleCurrentChange(currentPage.value); // 调用 handleCurrentChange 函数
  }
});

const dialogVisible = ref(false);

// 跳转到详情页
const router = useRouter();
function goDetails(c) {
    router.push({ 
    name: 'topicdetails',
    params: { 
      id: c.id
    } 
  });
}

const load = () => {
  count.value += 2
}
function gousermsg(id) {
    router.push({ 
    name: 'usermsg',
    params: { 
      id: id
    } 
  });
}
</script>


<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" style="border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);"  v-if="carlist && carlist.length > 0">
                <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto; padding: 0; margin: 0;" >
                    <li v-for="c in carlist" :key="c.id" class="infinite-list-item" style="list-style: none; margin-bottom: 20px;">
                      <router-link :to="'/details/' + c.id">
                        <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px;" >
                            {{ c.carname }}    
                        </div>
                        <div>
                            <img src="@/assets/image/car.jpg" alt="" style="max-width: 100%; height: auto;">
                        </div>
                      </router-link>
                    </li>
                </ul>
            </div>
            <div v-else>
              <el-empty description="暂无相关汽车"></el-empty>
            </div>
        </el-col>
        <el-col :span="14"><div class="grid-content ep-bg-purple" />
            <div class="Topstory-content" v-if="topstorylist && topstorylist.length > 0">
                <ul>
                    <li v-for="v in topstorylist" :key="v.id">
                      <div >
                
                        <h2 class="topic-title" @click="goDetails(v)">{{ v.title }}</h2>
                        <div class="topstory-hd">
                          <span @click="gousermsg(v.id)">{{ v.publisher_name }}</span>
                      </div>
                        <div class="topic-content" @click="goDetails(v)">{{ v.content }}</div>
                        <div>
                            <p class="publish-time">发布时间:{{ v.publish_time }}</p>
                        </div>
                    </div>
                    <el-row :gutter="20" class="action-area">
                        <el-col :span="4">
                            <el-button type="text" @click="voteUp(v)">
                                <i class="iconfont icon-xiangshang1"></i> 赞成 {{ v.favour }}
                            </el-button>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text">
                                <i class="iconfont icon-xiangxia2"></i>反对{{ v.disfavour }}
                            </el-button>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text">
                                <i class="iconfont icon-xiaoxi"></i> {{ v.comment_count }}
                            </el-button>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" @click="collectTopic(v)">
                                <i class="iconfont icon-shoucang"></i> 收藏
                            </el-button>
                        </el-col>
                     
                    </el-row>
        
                    </li>
                </ul>
                <!-- 对话框  -->
                <el-dialog v-model="dialogVisible" title="添加收藏" width="30%">
                    <span>添加到我的收藏夹</span>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="dialogVisible = false">
                                收藏
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <div v-else>
              <el-empty description="暂无相关话题"></el-empty>
            </div>
            <div class="Topstory-content">
                <el-pagination :page-size="10" :pager-count="10" @current-change="handleCurrentChange" layout="prev, pager,next"
                    :total="total" />
            </div>
        
        </el-col>
        <el-col :span="4">
          <div class="related-users" v-if="aboutuser && aboutuser.length > 0">
            <h3 class="section-title">相关用户</h3>
            <ul class="user-list">
              <li v-for="v in aboutuser" :key="v.id" class="user-item">
                <img class="user-avatar" src="@/assets/image/login_bak.jpg" alt="">
                <div class="user-info">
                  <div class="user-name">{{ v.webname }}</div>
                  <div class="user-actions">
                    <i class="iconfont icon-jiahao">{{ v.likes }}</i>
                    <span>关注</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div v-else>
            <el-empty description="暂无相关用户"></el-empty>
          </div>
        </el-col>
        
      </el-row>


   
</template>

<style>
.infinite-list {
    height: 850px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
/* 话题列表项 */
.topic-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

/* 话题标题 */
.topic-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* 话题内容 */
.topic-content {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

/* 发布时间 */
.publish-time {
  font-size: 12px;
  color: #999;
}

/* 动作区 */
.action-area {
  align-items: center;
}

.recommend-bd ul li {
  display: flex;
  align-items: center;
  margin: 10px 0;
  font-size: 12px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.user-list {
  list-style: none;
  padding: 0;
}

.user-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: bold;
}

.user-actions {
  display: flex;
  align-items: center;
}

.user-actions i {
  margin-right: 5px;
}

</style>
